<template  >
  <el-form :inline="true"  :model="form" label-width="auto"  style="margin-left: 20px; margin-top: 8px;" class="demo-form-inline">
     <el-form-item label="姓名" style="margin-left: 10%;">
       <el-input v-model="form.name" style="width: 120px;" />
     </el-form-item>
     <el-form-item label="状态">
       <el-select v-model="form.region" placeholder="请输入状态"  style="width: 120px;" >
         <el-option label="Zone one" value="shanghai" />
         <el-option label="Zone two" value="beijing" />
       </el-select>
     </el-form-item>
     <el-form-item label="时间">
       <el-col :span="11">
         <el-date-picker
           v-model="form.date1"
           type="date"
           placeholder="Pick a date"
           style="width: 100%"
         />
       </el-col> 
       <el-col :span="1" class="text-center">
         <span class="text-gray-300">-</span>
       </el-col>
       <el-col :span="11">
         <el-time-picker
           v-model="form.date2"
           placeholder="Pick a time"
           style="width: 100%"
         />
       </el-col>
     </el-form-item>
     
     
     <el-form-item  >
       <el-button type="primary" @click="onSubmit">查询</el-button>
       <el-button   @click="add">新增</el-button>
       <el-button>重置</el-button>
     </el-form-item>
   </el-form>
  

 
      <el-table stripe="true" border=true 
      show-header=true :data="dataList?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" scrollbar=true style="max-width: 99%;
       max-height: 100%;height: auto; padding-left: 5%; padding-top: 10px; overflow-y: auto" 
       >
         <el-table-column type="selection" width="55" />
         <el-table-column type="index" :index="indexMethod" label="序号" width="70px"/>
         <el-table-column prop="configId" label="configId" width="200px" v-if="false"/>   
         <el-table-column prop="configName" label="configName" width="200px"/> 
         <el-table-column prop="configKey" label="configKey" width="200px"/> 
         <el-table-column prop="configValue" label="configValue" width="200px"/> 
         <el-table-column prop="configType" label="configType" width="200px"/> 
         <el-table-column prop="createBy" label="createBy" width="200px"/> 
         <el-table-column prop="updateBy" label="updateBy" width="200px"/> 
         <el-table-column prop="updateTime" label="updateTime" width="200px"/> 
         <el-table-column prop="remark" label="remark" width="200px"/> 
         <el-table-column fixed="right" label="操作" min-width="120">
         <template #default="{ row, $index }">
             <el-button link type="primary" size="small" @click="handleClick(row, $index )">
                 删除
             </el-button>
             <el-button link type="primary" size="small" @click="editRow(row)">修改</el-button> 
         </template>
         </el-table-column>
         
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
       <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
         layout=" sizes, prev, pager, next, jumper,total" :total="dataList?.length" />
     </div>
 
     <!-- 编辑用户弹窗 -->
      <el-dialog v-model="dialogFormEVisible">
       <el-form ref="userForm2"  :model="formData2" :rules="rules">
         
         <el-form-item label="configId" prop="configId">
           <el-input v-model="formData2.configId" placeholder="请输入configId" />
         </el-form-item>
         <el-form-item label="configName" prop="configName">
           <el-input v-model="formData2.configName" placeholder="请输入用户姓名" />
         </el-form-item>
         <el-form-item label="configKey" prop="configKey">
           <el-input v-model="formData2.configKey" placeholder="请输入状态" />
         </el-form-item>
         <el-form-item label="configValue" prop="configValue">
           <el-input v-model="formData2.configValue" placeholder="请输入城市" />
         </el-form-item>
         <el-form-item label="configType" prop="configType">
           <el-input v-model="formData2.configType" placeholder="请输入地址" />
         </el-form-item>
         <el-form-item label="updateBy" prop="updateBy">
           <el-input v-model="formData2.updateBy" placeholder="请输入zip" />
         </el-form-item>
         <el-form-item label="updateTime" prop="updateTime">
           <el-input v-model="formData2.updateTime" placeholder="请输入zip" />
         </el-form-item>
         <el-form-item label="remark" prop="remark">
           <el-input v-model="formData2.remark" placeholder="请输入zip" />
         </el-form-item>
       </el-form>

       <template #footer>
         <div class="flex">
           <el-button type="primary" @click="submitEForm(userForm2)">确定</el-button>
           <el-button @click="clean">取消</el-button>
         </div>
       </template>
 
      </el-dialog>

      <!-- 新增用户弹窗 -->
      <el-dialog v-model="adddialogFormEVisible">
       <el-form ref="userForm2"  :model="formData2" :rules="rules">
         
         <!-- <el-form-item label="configId" prop="configId">
           <el-input v-model="formData2.configId" placeholder="请输入configId" />
         </el-form-item> -->
         <el-form-item label="configName" prop="configName">
           <el-input v-model="formData2.configName" placeholder="请输入用户姓名" />
         </el-form-item>
         <el-form-item label="configKey" prop="configKey">
           <el-input v-model="formData2.configKey" placeholder="请输入状态" />
         </el-form-item>
         <el-form-item label="configValue" prop="configValue">
           <el-input v-model="formData2.configValue" placeholder="请输入城市" />
         </el-form-item>
         <el-form-item label="configType" prop="configType">
           <el-input v-model="formData2.configType" placeholder="请输入地址" />
         </el-form-item>
         <el-form-item label="updateBy" prop="updateBy">
           <el-input v-model="formData2.updateBy" placeholder="请输入zip" />
         </el-form-item>
         <el-form-item label="updateTime" prop="updateTime">
           <el-input v-model="formData2.updateTime" placeholder="请输入zip" />
         </el-form-item>
         <el-form-item label="remark" prop="remark">
           <el-input v-model="formData2.remark" placeholder="请输入zip" />
         </el-form-item>
       </el-form>

       <template #footer>
         <div class="flex">
           <el-button  @click="addFrom()">保存</el-button>
           <el-button @click="clean">取消</el-button>
         </div>
       </template>
 
      </el-dialog>
 
      
 </template>
 
 <script lang="ts" setup>
 import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
 import { ref,reactive } from 'vue';
 import axios from 'axios';
 import request from '../utils/request';
 import Qs from 'qs'  // npm install qs  
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { Action } from 'element-plus'

  const dataList = ref([]);

  //查询
  function onSubmit(){
    request.get('/sys/config/con')
   .then((response) => {
      dataList.value = response.data;
    })
   .catch((error) => {

      console.error(error.message);
    });
  }


  request.get('/sys/config/con')
   .then((response) => {
      dataList.value = response.data;
    })
   .catch((error) => {
      console.error(error.message);
    });
    
   

 const userForm2 = ref();
 // 默认页数
 const currentPage = ref(1);
 // 分页的默认数
 const pageSize = ref(5);
 
 let dialogFormEVisible= ref(false);  //编辑页面是否显示
 let adddialogFormEVisible= ref(false); //新增页面是否显示
 
 const clean =()=>{
   dialogFormEVisible.value = false;
   adddialogFormEVisible.value = false;
 }
  
 // 点修改后展示数据
 const editRow = (row:any) => {
       const { configId,configName, configKey, configValue,configType,createBy,updateBy,updateTime,remark } = row;
       // 展示编辑表单
       dialogFormEVisible.value = true;
       formData2.configId = configId;
       formData2.configName = configName;
       formData2.configKey = configKey;
       formData2.configValue = configValue;
       formData2.configType = configType;
       formData2.createBy = createBy;
       formData2.updateBy = updateBy;
       formData2.updateTime = updateTime;
       formData2.remark = remark;
     };

  //新增
  function addFrom(){
    debugger;
    request.post('/sys/config/saveCon',Qs.stringify(formData2) )
        .then(function (response) {
          onSubmit();
          adddialogFormEVisible.value = false;  
          ElMessage('新增成功');
           // 清空表单数据，不然重新新增还是原来的数据
              Object.keys(formData2).forEach(key => {
              formData2[key] = ''; 
                  });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  //点击新增，显示新增页面
 function add(){
  adddialogFormEVisible.value = true;
 }
 
 // 修改提交
 const submitEForm = (formEl) => {
    
    request.post('/sys/config/updateConfig',Qs.stringify(formData2) )
        .then(function (response) {
          onSubmit();
          dialogFormEVisible.value = false;
          ElMessage('更新成功');
        })
        .catch(function (error) {
          console.log(error);
        });
     };

 const formData2 =  reactive({
  configId : "",
  configName: "",
  configKey: "",
  configValue: "",
  configType: "",
  createBy: "",
  updateBy: "",
  updateTime: "",
  remark: "",
       })
 //校验
 const   rules= {
         date : [{ required: true, message: "此项为必填", trigger: "blur" }],
         name : [{ required: true, message: "此项为必填", trigger: "blur" }],
         state : [{ required: true, message: "此项为必填", trigger: "blur" }],
         city: [{ required: true, message: "此项为必填", trigger: "blur" }],
       };
 
 // form表单数据绑定
 const form = reactive({
   name: '',
   region: '',
   date1: '',
   date2: '',
   delivery: false,
   type: [],
   resource: '',
   desc: '',
 })

 
 const indexMethod = (index: number) => {
   return index + 1
 }

 const handleClick = (row, index) => {
  debugger;
  formData2.configId = row.configId;
  request.post('/sys/config/deleteConfig',Qs.stringify(formData2) )
.then(function (response) {
  onSubmit();
  //dialogFormEVisible.value = false;
 
  ElMessage('删除成功');


})
.catch(function (error) {
  console.log(error);
});
 }
 const edit = () => {
   alert("修改")
 }
 

 const tableData = ref([
 {date: "2016-08-29", name: "Anna", state: "California", city: "Los Angeles", address: "No. 628, Pine St, Los Angeles", zip: "CA 90048"},
     {date: "2016-05-04", name: "Ben", state: "California", city: "Los Angeles", address: "No. 160, Elm St, Los Angeles", zip: "CA 90069"},
     {date: "2016-10-25", name: "Charlie", state: "California", city: "Los Angeles", address: "No. 436, Fir St, Los Angeles", zip: "CA 90029"},
     {date: "2016-01-19", name: "Diana", state: "California", city: "Los Angeles", address: "No. 709, Birch St, Los Angeles", zip: "CA 90011"},
     {date: "2016-07-16", name: "Ethan", state: "California", city: "Los Angeles", address: "No. 881, Willow St, Los Angeles", zip: "CA 90037"},
     {date: "2016-02-24", name: "Fiona", state: "California", city: "Los Angeles", address: "No. 634, Maple St, Los Angeles", zip: "CA 90003"},
     {date: "2016-09-12", name: "George", state: "California", city: "Los Angeles", address: "No. 387, Oak St, Los Angeles", zip: "CA 90056"},
     {date: "2016-06-07", name: "Hannah", state: "California", city: "Los Angeles", address: "No. 756, Spruce St, Los Angeles", zip: "CA 90082"},
     {date: "2016-12-14", name: "Ian", state: "California", city: "Los Angeles", address: "No. 922, Cedar St, Los Angeles", zip: "CA 90070"},
     {date: "2016-04-21", name: "Jackie", state: "California", city: "Los Angeles", address: "No. 590, Pine St, Los Angeles", zip: "CA 90017"},
     {date: "2016-11-08", name: "Katherine", state: "California", city: "Los Angeles", address: "No. 474, Elm St, Los Angeles", zip: "CA 90049"},
     {date: "2016-03-03", name: "Leo", state: "California", city: "Los Angeles", address: "No. 246, Fir St, Los Angeles", zip: "CA 90028"},
     {date: "2016-02-10", name: "Mia", state: "California", city: "Los Angeles", address: "No. 114, Birch St, Los Angeles", zip: "CA 90009"},
     {date: "2016-05-26", name: "Nathan", state: "California", city: "Los Angeles", address: "No. 998, Willow St, Los Angeles", zip: "CA 90065"},
     {date: "2016-09-07", name: "Olivia", state: "California", city: "Los Angeles", address: "No. 785, Maple St, Los Angeles", zip: "CA 90058"},
     {date: "2016-07-31", name: "Paul", state: "California", city: "Los Angeles", address: "No. 321, Oak St, Los Angeles", zip: "CA 90012"},
     {date: "2016-12-28", name: "Quincy", state: "California", city: "Los Angeles", address: "No. 153, Spruce St, Los Angeles", zip: "CA 90044"},
     {date: "2016-01-23", name: "Rachel", state: "California", city: "Los Angeles", address: "No. 667, Cedar St, Los Angeles", zip: "CA 90031"},
     {date: "2016-06-14", name: "Sam", state: "California", city: "Los Angeles", address: "No. 519, Pine St, Los Angeles", zip: "CA 90077"},
     {date: "2016-11-21", name: "Tara", state: "California", city: "Los Angeles", address: "No. 844, Elm St, Los Angeles", zip: "CA 90016"},
     {date: "2016-04-15", name: "Ursula", state: "California", city: "Los Angeles", address: "No. 290, Fir St, Los Angeles", zip: "CA 90026"},
     {date: "2016-08-08", name: "Victor", state: "California", city: "Los Angeles", address: "No. 457, Birch St, Los Angeles", zip: "CA 90059"},
     {date: "2016-03-29", name: "Wendy", state: "California", city: "Los Angeles", address: "No. 723, Willow St, Los Angeles", zip: "CA 90002"},
     {date: "2016-01-06", name: "Xavier", state: "California", city: "Los Angeles", address: "No. 951, Maple St, Los Angeles", zip: "CA 90061"},
     {date: "2016-05-31", name: "Yvonne", state: "California", city: "Los Angeles", address: "No. 364, Oak St, Los Angeles", zip: "CA 90034"},
     {date: "2016-10-20", name: "Zachary", state: "California", city: "Los Angeles", address: "No. 601, Spruce St, Los Angeles", zip: "CA 90079"},
     {date: "2016-07-12", name: "Abraham", state: "California", city: "Los Angeles", address: "No. 178, Cedar St, Los Angeles", zip: "CA 90018"},
     {date: "2016-12-02", name: "Barbara", state: "California", city: "Los Angeles", address: "No. 415, Pine St, Los Angeles", zip: "CA 90040"},
     {date: "2016-02-29", name: "Cameron", state: "California", city: "Los Angeles", address: "No. 873, Elm St, Los Angeles", zip: "CA 90021"},
     {date: "2016-09-24", name: "Daniel", state: "California", city: "Los Angeles", address: "No. 229, Fir St, Los Angeles", zip: "CA 90005"},
     {date: "2016-06-19", name: "Elena", state: "California", city: "Los Angeles", address: "No. 546, Birch St, Los Angeles", zip: "CA 90062"},
     {date: "2016-01-11", name: "Frank", state: "California", city: "Los Angeles", address: "No. 772, Willow St, Los Angeles", zip: "CA 90030"},
     {date: "2016-04-02", name: "Grace", state: "California", city: "Los Angeles", address: "No. 939, Maple St, Los Angeles", zip: "CA 90080"},
     
 ])
 </script>
 
 <style scoped>
 .demo-form-inline .el-input {
   --el-input-width: 220px;
 }
 
 .demo-form-inline .el-select {
   --el-select-width: 220px;
 }
 .demo-pagination-block+.demo-pagination-block {
   margin-top: 10px;
 }
  
 .demo-pagination-block .demonstration {
   margin-bottom: 16px;
 }
  
 .demo-pagination-block {
   padding: 15px;
   background-color: white;
   display: flex;
   justify-content: center;
 }
 </style>